<template>
    <div class="adjustment">
        <el-dialog
        title="调整打卡信息"
        :visible.sync="adjustmentDialogVisible"
        width="40%"
        :center="true"
        :before-close="adjustmentCancel">
        <el-form  label-width="140px" :model="adjustmentList" :rules="rules" ref="adjustmentList" >
            <el-form-item label="员工姓名">
                {{adjustmentList.userName}}
            </el-form-item>
            <el-form-item label="打卡日期">
                {{adjustmentList.printingDate}}
            </el-form-item>
            <el-form-item label="上班打卡时间" prop="clockTimeIn">
                <el-time-picker
                    v-model="adjustmentList.clockTimeIn"
                    value-format="HH:mm:ss"
                    format="HH:mm:ss"
                    placeholder="任意时间点">
                </el-time-picker>
            </el-form-item>
            <el-form-item label="上班打卡地点">
                {{adjustmentList.locationPunchIn}}
            </el-form-item>
            <el-form-item label="下班打卡时间" prop="timePunchOut">
                <el-time-picker
                    v-model="adjustmentList.timePunchOut"
                    value-format="HH:mm:ss"
                    format="HH:mm:ss"
                    placeholder="任意时间点">
                </el-time-picker>
            </el-form-item>
            <el-form-item label="下班打卡地点">
                {{adjustmentList.placePunchAfter}}
            </el-form-item>
            <el-form-item label="实际上班工时/h">
                <el-input v-model="adjustmentList.actualHour" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="加班工时/h">
                <el-input v-model="adjustmentList.addedHours" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="考勤状态" prop="state">
                <el-select v-model="adjustmentList.state">
                    <el-option v-for="(item,index) in optionsList"  :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input
                    v-model="adjustmentList.remark"
                    type="textarea"
                    :rows="4"
                    maxlength="300"
                    placeholder="请输入内容">
                </el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="adjustmentCancel">取 消</el-button>
            <el-button type="primary" @click="confirmAdjustment">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>
<script>
    export default{
        name:'Adjustment',
        props:['adjustmentDialogVisible','adjustmentList'],
        data(){
           return{
               optionsList:[
                   {label:'正常',value:0},
                   {label:'调休',value:1},
                   {label:'请假',value:2},
               ],
               rules:{
                   clockTimeIn:[
                       { required: true, message: '请输入上班时间', trigger: 'change' }
                   ],
                   timePunchOut:[
                       { required: true, message: '请输入下班时间', trigger: 'change' }
                   ],
                   state:[
                       { required: true, message: '请选择考勤状态', trigger: 'blur' }
                   ],
                   remark:[
                       { required: true, message: '请输入备注', trigger: 'blur' },
                   ]
               }
           }
        },
        methods:{
            // 取消调整按钮
            adjustmentCancel(){
                this.$emit('adjustmentCancel',false)
                this.$message('已取消调整');
            },
            // 确认调整按钮
            confirmAdjustment(){
                if(this.adjustmentList.remark == ''){
                    this.$message({
                        message: '请填写必填项',
                        type: 'warning'
                    });
                }else{
                    this.$emit('confirmAdjustment',false)
                    this.$message({
                        message: '调整成功',
                        type: 'success'
                    });
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    .el-input{
        width: 250px;
    }
</style>